<!--
 * @Author: Dorange.Wang
 * @Date: 2021-05-19 15:40:51
 * @LastEditors: wangming
 * @LastEditTime: 2021-12-06 16:30:17
 * @Description: file content
-->
<template>
  <div>
    <el-dropdown
      @command="handleCreate"
      placement="bottom-start"
      trigger="click"
      size="medium"
    >
      <el-button type="primary">
        添加<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          :disabled="modelInfo.type !== 'VIRTUAL'"
          command="http"
          >HTTP方法</el-dropdown-item
        >
        <el-dropdown-item disabled command="data">数据规则</el-dropdown-item>
        <el-dropdown-item command="script">脚本</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-table
      ref="table"
      class="mt10"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
      highlight-current-row
    >
      <el-table-column prop="key" label="服务编码">
        <template slot-scope="scope">
          {{ scope.row.key }}
          <el-button
            style="margin-left: 10px"
            type="text"
            @click="copy(scope.row.key)"
            icon="el-icon-document-copy"
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="服务名称" />
      <el-table-column prop="type" label="服务方式">
        <template slot-scope="scope">
          {{ scope.row.type | serviceType }}
        </template>
      </el-table-column>
      <el-table-column prop="serviceType" label="服务类型">
        <template slot-scope="scope">
          {{ scope.row.serviceType === "BUILT_IN" ? "默认服务" : "自定义服务" }}
        </template>
      </el-table-column>

      <el-table-column prop="remark" label="说明" />
      <el-table-column prop="actions" label="操作" width="180">
        <template slot-scope="scope">
          <span
            v-if="scope.row.serviceType !== 'BUILT_IN'"
            class="table-actionItem"
          >
            <el-button type="text" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
          </span>
          <span v-if="scope.row.scriptId" class="table-actionItem">
            <el-button type="text" @click="handleDebugScript(scope.row)"
              >脚本调试</el-button
            >
          </span>
          <span
            v-if="scope.row.serviceType !== 'BUILT_IN'"
            class="table-actionItem"
          >
            <el-popconfirm
              title="确定要删除该业务服务吗？"
              placement="top"
              @confirm="handleDelete(scope.row)"
            >
              <el-button class="link-danger" type="text" slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </span>
          <span
            v-if="scope.row.serviceType === 'HTTP'"
            class="table-actionItem"
          >
            <el-button type="text" @click="handleDebugHttp(scope.row)"
              >调试</el-button
            >
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData"
      />
    </div>

    <HttpModal ref="HttpModal" :modelInfo="modelInfo" />
    <ScriptModal ref="ScriptModal" :modelInfo="modelInfo"></ScriptModal>
    <HttpDebugModal
      ref="HttpDebugModal"
      :modelInfo="modelInfo"
    ></HttpDebugModal>
  </div>
</template>

<script>
import { getHmhttprequestdefinitionPageList,deleteHmhttprequestdefinition } from '@/apis/paas/HmHttpRequestDefinitionController.js'
import HttpModal from "./HttpModal";
import HttpDebugModal from "./HttpDebug/HttpDebugModal";
import ScriptModal from "./ScriptModal";
import { copy } from "@/utils/util";
export default {
  name: "ScriptList",

  components: {
    HttpModal,
    HttpDebugModal,
    ScriptModal,
  },

  props: {
    modelInfo: {
      type: Object,
      default: () => {},
    },
  },

  data() {
    return {
      copy,
      loading: false,
      pageData: {
        pageSize: 10,
        pageNo: 1,
      },
      tableData: [],
      total: 0,
    };
  },

  methods: {
    init() {
      if (this.total === 0) {
        this.loadData();
      }
    },

    loadData(pageNo = this.pageData.pageNo) {
      getHmhttprequestdefinitionPageList({
        ...this.queryData,
        ...this.pageData,
        pageNo,
        modelId: this.modelInfo.id,
      }).then((res) => {
        if (res.data.length === 0 && pageNo > 1) {
          this.loadData(pageNo - 1);
          return;
        }
        this.tableData = res.data;
        this.total = res.totalCount;
        this.pageData = {
          pageSize: res.pageSize,
          pageNo: res.pageNo,
        };
      });
    },

    handleHttpCreate() {
      this.$refs.HttpModal.open(undefined, () => {
        this.loadData(1);
        this.$message.success("操作成功");
      });
    },

    handleScriptCreate() {
      this.$refs.ScriptModal.open(undefined, () => {
        this.loadData(1);
        this.$message.success("操作成功");
      });
    },

    handleCreate(command) {
      if (command === "http") {
        this.handleHttpCreate();
      } else if (command === "script") {
        this.handleScriptCreate();
      }
    },

    handleEdit(record) {
      if (record.serviceType === "HTTP") {
        this.$refs.HttpModal.open(
          {
            ...record,
          },
          () => {
            this.loadData();
            this.$message.success("操作成功");
          }
        );
      } else if (record.serviceType === "SCRIPT") {
        this.$refs.ScriptModal.open(
          {
            ...record,
          },
          () => {
            this.loadData();
            this.$message.success("操作成功");
          }
        );
      }
    },

    handleDelete(record) {
      deleteHmhttprequestdefinition([record.id]).then((res) => {
        this.loadData();
        this.$message.success("操作成功");
      });
    },
    // 脚本调试
    handleDebugScript(record) {
      const { origin, pathname } = window.location;
      window.open(
        `${origin}${pathname}#/scriptDebug?scriptId=${record.scriptId}`
      );
    },
    // 虚拟业务 http调试
    handleDebugHttp(record) {
      this.$refs.HttpDebugModal.open(
        {
          ...record,
        },
        () => {
          this.loadData();
          this.$message.success("操作成功");
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
